import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/global/color_config.dart';
import 'package:flutter_app/global/flutter_toast.dart';
import 'package:flutter_app/login/login.dart';
import 'package:flutter_app/util/sp/login_key.dart';
import 'package:flutter_app/util/sp_util.dart';

class MainDrawerWidget extends StatefulWidget {
  const MainDrawerWidget({super.key});

  @override
  MainDrawerPageState createState() => MainDrawerPageState();
}

class MainDrawerPageState extends State<MainDrawerWidget> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      //MediaQuery.removePadding可以移除Drawer内的一些空白间距
      child: MediaQuery.removePadding(
          context: context,
          removeTop: true,
          child: Column(
            children: <Widget>[
              Container(
                width: double.infinity,
                padding: const EdgeInsets.fromLTRB(0, 32, 0, 20),
                color: ColorConfig.themeColor,
                child: Column(
                  children: <Widget>[
                    //圆形图标
                    Container(
                      alignment: Alignment.topRight,
                      child: IconButton(
                        onPressed: () {
                          FlutterToast.showToast('跳转到排名');
                        },
                        icon: Image.asset(
                          "images/icon_main_drawer_ranking.png",
                          scale: 3,
                        ),
                      ),
                    ),
                    InkWell(
                      onTap: () async {
                        if (await SPUtil.getBool(LoginKey.loginStateKey)) {

                        } else {
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => const LoginWidget())
                          );
                        }
                      },
                      child: Container(
                        alignment: Alignment.center,
                        child: Column(
                          children: [
                            ClipOval(
                              child: CachedNetworkImage(
                                  width: 80,
                                  height: 80,
                                  imageUrl: "https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
                              ),
                            ),
                            Container(
                              padding: const EdgeInsets.fromLTRB(0, 6, 0, 0),
                              child: const Text(
                                '去登陆',
                                style: TextStyle(
                                    color: Colors.white, fontSize: 14),
                              ),
                            ),
                            Container(
                              padding: const EdgeInsets.fromLTRB(0, 8, 0, 8),
                              child: const Text('等级0 排名',
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 10)),
                            )
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                //ListView列表组件
                child: ListView(
                  physics: const ScrollPhysics(),
                  children: <Widget>[
                    //ListView的项
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_integral.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("我的积分",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_collection.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("我的收藏",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_share.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("我的分享",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_read_history.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("阅读记录",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_todo.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("TODO",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_qrcode.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("扫一扫",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                    ListTile(
                      leading: const Image(
                        image: AssetImage('images/icon_menu_setting.png'),
                        width: 20,
                      ),
                      contentPadding: const EdgeInsets.fromLTRB(16, 0, 0, 0),
                      title: Transform(
                        transform: Matrix4.translationValues(-24, 0.0, 0.0),
                        child: const Text("系统设置",
                            style:
                                TextStyle(fontSize: 14, color: Colors.black54)),
                      ),
                      onTap: () {},
                    ),
                  ],
                ),
              )
            ],
          )),
    );
  }
}
